<template>
  <div>
    <div>{{ name }}</div>

    <div :id="id">{{ name }}</div>

    <div>
      <h1>{{ state.count }}</h1>
      <button @click="state.count--">减一</button>

      <h1>{{ state2.count2 }}</h1>
      <button @click="state2.count2++"></button>

      <button @click="add">打印</button>

      <h1>{{ student[2] }}</h1>
      <button @click="students">学生</button>

    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const state = reactive({ count: 100 })

const state2 = ref({ count2: 1000 })


const add = () => {
  console.log(state2.value)

}


const student = ref(['zhang','li','wang'])
const students = ()=>{
  console.log(student.value[2])
}

const name = '耿世杰'
const id = 'name'
</script>

<style type = "text/css">
div {
  border: 1px blue solid;
  width: 200px;

}

#name {
  color: red;
  font-size: 50px;
}

h1{
  color: blueviolet;
}
</style>